const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
process.env.NODE_ENV = 'development'
module.exports = {
  target: "web",
  entry: ['./src/js/index.js'],
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    // oneOf-构建文件时匹配单一loader,避免文件重复匹配，添加构建时间
    rules: [
      // loader的配置
      {
        oneOf: [
          {
            // 处理less资源
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          },
          {
            // 处理css资源
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          },
          {
            // 处理图片资源
            test: /\.(jpg|png|gif)$/,
            type:"asset",
            include:[
                resolve(__dirname,'./src/imgs')
            ],
            //解析
            parser: {
              //转base64的条件
              dataUrlCondition: {
                  maxSize: 8 * 1024, // 25kb
              }
            },
            generator:{ 
                //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径
                filename:'imgs/[name][ext]',
                //打包后对资源的引入，文件命名已经有/assets了
                publicPath:'./'
            }
          },
          {
            // 处理html中img资源
            test: /\.html$/,
            loader: 'html-loader'
          },
          {
            // 处理其他资源
            exclude: /\.(html|js|css|less|jpg|png|gif)/,
            type:"asset/resource",
            // 配置
            generator:{
              filename:'assets/[name][ext]',
            }
          }
        ]
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    compress: true,
    port: 3000,
    open: true,
    hot: true
  }
};